<script setup>
import {nextTick, onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import {showToast} from "vant";
import {currentUser} from "@/App.vue";
import { useRouter, useRoute } from 'vue-router';
import qs from "qs";

const router = useRouter();
const route = useRoute();
const orderId = ref('');

const onClickLeft = () =>{
  history.back();
}

const orderCards = ref({});
const amount = ref({
  userId:'',
  status:'',
  updateAmount:''
})

const zhifu = () =>{
  amount.value.userId = userInfo.value.userId;
  amount.value.status = 0;
  amount.value.updateAmount = (parseFloat(payAccount.value.finalAccount)/100.00).toFixed(2);
  let data  = qs.stringify(amount.value);
  console.log(data);
  request.post(BASE_URL + "/v1/user/updateAmount", data).then((response) => {
    if(response.data.code === 2000) {
        orderCards.value.orderStatus = '待接单';
        updateOrder();
        router.push({ path: '/success', query: {} });
    }
  })
}

const updateOrder = ()=>{
  let data = qs.stringify(orderCards.value);
  console.log(data);
  request.post(BASE_URL + '/v1/order/insert', data).then((response) => {
    if (response.data.code === 2000) {
    }
  })
}

const payAccount = ref({
  orderAccount:'',
  riderAccount:'',
  finalAccount:''
});

const coupon = {
  available: 1,
  condition: '无门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
  showList.value = false;
  chosenCoupon.value = index;
};
const onExchange = (code) => {
  coupons.value.push(coupon);
};

const userInfo = ref({
  username:'test',
  description:'吾心吾行澄如明镜，所作所为皆是正义。吾心吾行澄如明镜，所作所为皆是正义。',
  level: 10,
  gender: '男',
  avatarImgUrl:'',
  userId:''
});


onMounted(() => {
  orderId.value = route.query.orderId;
  console.log(orderId.value);
  request.get(BASE_URL + "/v1/order/select?orderId=" + orderId.value).then((response) => {
    if (response.data.code == 2000) {
      orderCards.value = response.data.data[0];
      console.log(orderCards.value);
      let price = orderCards.value.orderPrice;
      console.log(price);
      payAccount.value.orderAccount = price;
      payAccount.value.riderAccount = (price * 0.15).toFixed(2);
      payAccount.value.finalAccount = ((parseFloat(payAccount.value.orderAccount) + parseFloat(payAccount.value.riderAccount)).toFixed(2)) * 100;
      nextTick(() => {
        userInfo.value = currentUser.value;
        console.log(userInfo.value);
      })
    }
  })
})

</script>

<template>
  <div style="background-color: #f7f8fa">
    <van-nav-bar
        title="校园派安全支付"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell-group style="text-align: left;">
        <van-cell title="金额" style="font-weight: bold;"/>
        <van-cell title="订单价格" :value="'￥'+payAccount.orderAccount"/>
        <van-cell title="跑腿费" :value="'￥'+payAccount.riderAccount"/>
        <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
        />
      </van-cell-group>
      <van-submit-bar :disabled="payAccount.finalAccount>userInfo.amount" tip-icon="info-o" :price="payAccount.finalAccount" button-text="支付" @submit="zhifu">
        <template #tip v-if="payAccount.finalAccount>userInfo.amount">
          您的余额不够, <span @click="onClickLink">前往充值</span>
        </template>
      </van-submit-bar>
    </van-cell-group>
    <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<style scoped>

</style>